<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>应用系统管理</title>
<link href="../css/popForm.css" rel="stylesheet" type="text/css" />
<link href="../css/tab.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="../scripts/jquery-2.0.0.min.js"></script>
<script type="text/javascript">
var url = '<%=basePath%>rest/apm/nodes';
function getNodes(){
	$('#showtable').html('');
	$.getJSON(url, function(data) {
		Nodes=data.nodes;
		CreateTable(Nodes);
	});
}

//表格提交方法
function Nodetab(){
	var i=document.getElementById('funNum').value;
	if(i==1){
		addNode();
	}else if(i==2){
		updNode();
	}
}

//弹出添加表单
function addForm(){
	document.getElementById('funNum').value=1;
	 showPopup('300px','165px');
}

function addNode() {
	var url1 = '<%=basePath%>rest/apm/node';
	var jsonObj=jsonData();
	$.ajax({
		 url: url1,
		 type:'POST',
		 contentType:'application/json; charset=UTF-8',
		 data:jsonObj,
		 success: function(data) {
			 showOperResult(data);
		 }
		});
	$('#showtable').html('');
	getNodes();
}

function updNode(){
	var url1 = '<%=basePath%>rest/apm/node';
		var jsonObj = jsonData();
		$.ajax({
			url : url1,
			type : 'PUT',
			contentType : 'application/json; charset=UTF-8',
			data : jsonObj,
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getNodes();
	}

	function delNode(id) {
		var delurl = '<%=basePath%>rest/apm?id='+id+'&typeid=2';
		$.ajax({
			url : delurl,
			type : 'DELETE',
			success : function(data) {
				showOperResult(data);
			}
		});
		$('#showtable').html('');
		getNodes();
	}

	//封装json数据，为了代码清晰 
	function jsonData() {
		var serviceId = document.getElementById('serviceId').value;
		var serviceCode = document.getElementById('serviceCode').value;
		var serviceName = document.getElementById('serviceName').value;
		var ip = document.getElementById('ip').value;
		var port = document.getElementById('port').value;

		var jsonStr = "{";
		jsonStr += "\"type\":";
		jsonStr += "\"service\"";
		jsonStr += ",";
		jsonStr += "\"serviceId\":";
		jsonStr += "\"" + serviceId + "\"";
		jsonStr += ",";
		jsonStr += "\"serviceCode\":";
		jsonStr += "\"" + serviceCode + "\"";
		jsonStr += ",";
		jsonStr += "\"serviceName\":";
		jsonStr += "\"" + serviceName + "\"";
		jsonStr += ",";
		jsonStr += "\"ip\":";
		jsonStr += "\"" + ip + "\"";
		jsonStr += ",";
		jsonStr += "\"port\":";
		jsonStr += "" + port + "";
		jsonStr += "}";
		return jsonStr;//关键在于转换。 
	}

	$(document).ready(function() {
		getNodes();
	});

	//创建表格
	function CreateTable(datalist) {
		var table = $("<table class=\"tab\">");
		table.appendTo($("#showtable"));
		var th = $("<th></th>");
		var td1 = $("<td>serviceId</td>");
		//var td2 = $("<td>serviceCode</td>");
		var td3 = $("<td>serviceName</td>");
		var td4 = $("<td>ip</td>");
		var td5 = $("<td>port</td>");
		var td6 = $("<td>操作</td>");
		td1.appendTo(th);
		//td2.appendTo(th);
		td3.appendTo(th);
		td4.appendTo(th);
		td5.appendTo(th);
		td6.appendTo(th);
		th.appendTo(table);
		for (var k = 0; k < datalist.length; k++) {
			var objStr=JSON.stringify(datalist[k]);
			var tr1 = $("<tr></tr>");
			var td1 = $("<td>" + datalist[k].serviceId + "</td>");
			//var td2 = $("<td>" + datalist[k].serviceCode + "</td>");
			var td3 = $("<td>" + datalist[k].serviceName + "</td>");
			var td4 = $("<td width=50px>" + datalist[k].ip + "</td>");
			var td5 = $("<td>" + datalist[k].port + "</td>");
			var td6 = $("<td><a href='#' onclick=delNode('"
					+ datalist[k].serviceId + "')>删除</a>&nbsp;||&nbsp;<a href='#' onclick=showUpdFormVal("+objStr+")>编辑</a></td>");
			td1.appendTo(tr1);
			//td2.appendTo(tr1);
			td3.appendTo(tr1);
			td4.appendTo(tr1);
			td5.appendTo(tr1);
			td6.appendTo(tr1);
			tr1.appendTo(th);
		}
		$("#showtable").append("</table>");
	}
	
	function showOperResult(status){
		$('#operStaus').html('');
		if(status==1){
			$('#operStaus').html("<font size='3' color='red'>操作失败！</font>");
		}else if(status==2){
			$('#operStaus').html("<font size='3' color='red'>操作成功！</font>");
		}
	}
	
	//弹出更新表单
	function showUpdFormVal(obj){
		 document.getElementById('funNum').value=2;
		 
		 document.getElementById('serviceId').value= obj.serviceId;
		 document.getElementById('serviceCode').value= obj.serviceCode;
		 document.getElementById('serviceName').value= obj.serviceName;
		 document.getElementById('ip').value= obj.ip;
		 document.getElementById('port').value= obj.port;
		 
		 showPopup('300px','165px');
	}
</script>

<body>
	<input type="button" onclick="getNodes();" value="查询节点" />
	<input type="button" onclick="addForm();" value="添加节点" />
	<br />
	<!--操作结果提示-->
	<div id="operStaus" style="width:150px;height:25px;"></div>
	<input type="hidden" id="funNum" name="funNum" />
	<div id="popDiv">
		<div id="popTitle">
			<!-- 标题div -->
			<span class="title_left">修改操作</span> <span class="title_right">
			<a href="#" onclick="hidePopup();">关闭</a> </span>
		</div>
		<!-- 表单div -->
		<div id="popForm">
		<form id="form1" name="form1">
			<table>
				<tr id="serid" style="display: none;">
					<td width="60" align="left">serviceId</td>
					<td width="150" align="left"><input type="text" id="serviceId"
						name="serviceId" /></td>
				</tr>
				<tr>
					<td align="left">serviceCode</td>
					<td align="left"><input type="text" id="serviceCode"
						name="serviceCode" /></td>
				</tr>
				<tr>
					<td align="left">serviceName</td>
					<td align="left"><input type="text" id="serviceName"
						name="serviceName" /></td>
				</tr>
				<tr>
					<td align="left">ip</td>
					<td align="left"><input type="text" id="ip" name="ip" /></td>
				</tr>
				<tr>
					<td align="left">port</td>
					<td align="left"><input type="text" id="port" name="port" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="button" value="提交" onclick="Nodetab();" />
						&nbsp;<input type="reset" value="重置" />&nbsp;<input type="button" value="关闭" onclick="hidePopup()" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	</div>
	<hr>
	<div id="showtable"></div>
</body>
<script type="text/javascript" src="../scripts/mouseMoveForm.js"></script>
</html>